<template>
    <div class="advertPositionManage">
        <el-card>
            <div class="opt_wrap">
                <el-button type="text" @click="goToURL('advertPositionDetails','create')">
                    <i class="iconfont icon-add"></i>
                    新建
                </el-button>
            </div>
            <div class="search_wrap">
                <el-input placeholder="广告位名称" v-model="searchCondition" style="width: 260px;" @keyup.enter.native="queryListData">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>

            </div>
            <div class="table_list">
                <el-table
                    :data="tableListData"
                    min-height="500"
                    border
                    v-loading="loading"
                    style="width: 100%">
                    <el-table-column type="index" align="center" width="40" label="ID"/>
                    <el-table-column align="center" label="广告位名称">
                      <template slot-scope="scope">
                          <span>{{scope.row.title}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="最多展示数">
                      <template slot-scope="scope">
                          <span>{{scope.row.maximum}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" width="80" label="状态">
                      <template slot-scope="scope">
                          <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            disabled
                            @click.native="changeStatus(scope.row.id,scope.row.status)">
                        </el-switch>
                      </template>
                    </el-table-column>
                    
                    <el-table-column label="操作" align="center"  width="94">
                        <template slot-scope="scope">
                            <el-row type="flex" align="center">
                                <el-col :span="12" >
                                    <el-button type="text"  size="small" circle  @click="goToURL('advertPositionDetails','edit',scope.row.id)">编辑</el-button>
                                </el-col>
                                <el-col :span="12" >
                                    <el-button type="text" size="small" circle  @click="handleDelete(scope.row.id)">删除</el-button>
                                </el-col>
                            </el-row>
                　　　　</template>
                    </el-table-column>
                </el-table>
                <link-pagination :total="total" :currentPage="currentPage" :limit="limit" v-if="total != 0" @pagination="getPaginationParams"></link-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import {changeTitleMinin} from '@/mixin';
import http from '@/api/ad_position'
export default {
    name: 'advertPositionManage',
    mixins: [changeTitleMinin],
    data() {
        return {
            searchCondition: null,
            loading: false,
            tableListData: [],
            total: 0,
            currentPage: 1,
            limit: 15,
        }
    },
    methods: {
        goToURL(name,pageType,id){
            this.$router.push({name, params:{ pageType, id }});
        },
        queryListData(){
            this.getListData();
        },
        changeStatus(id,statusBoolean){
            let status = statusBoolean?0:1;
            http.updateOnlyfield({id,status}).then(res => {
                this.getListData();
            })
        },
        handleDelete(id){
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonClass: 'el-button--danger'
            }).then(() => {
                http.deleteContent({id}).then(res => {
                    this.$message.success(res.msg || '删除成功！');
                    this.getListData();
                })
            }).catch(()=>{});
        },
        getPaginationParams(params){
            this.currentPage = params.page;
            this.limit = params.limit;
            this.getListData();
        },
        getListData(page=this.currentPage,list_rows=this.limit,search=this.searchCondition){
            this.loading = true;
            http.getList({page,list_rows,search}).then(res => {
                this.loading = false;
                this.total = res.data.total;
                let tableListData = res.data.data;
                if(tableListData.length){
                    tableListData.map(item=>{
                        item.status = item.status==1?true:false;
                    })
                    this.tableListData = tableListData;
                }
            })
        },
    },
    created(){
        this.getListData();
    }
}
</script>

<style lang="scss" scoped>
.advertPositionManage{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }
    .opt_wrap{
        padding: 0px 30px;
    }
    .search_wrap{
        padding: 20px 30px;
    }
    .table_list{
        padding: 0px 10px;
    }
}
</style>